<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>小说,小说网-纵横中文网|最热门的免费小说网</title>
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="小说,小说网,免费小说,纵横中文网"/>
    <meta name="description" content="纵横中文网,最热门的免费小说网站,提供玄幻小说、网游小说、言情小说、穿越小说、都市小说等免费小说在线阅读与下载。大神作品齐聚纵横,最新章节每日更新。"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/passport.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}"/>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>

</head>

<body data-cpt3="1" data-cpt3app="FFFF0N00000000006BA5" data-cpt3scene="ic_login">

<div class="wrap pass_header">
    <div class="pass_logo">
        <a th:href="@{/index}"><img th:src="@{/picture/logo.png}" alt="" src=""/></a>
    </div>
    <div class="pass_link">
        没有账号? <a th:href="@{/signin}">注册</a>
    </div>
</div>
<div class="passbg">
    <div class="wrap">
        <div class="pass_ad">
            <a th:href="@{/index}" title="" target="_blank"><img th:src="@{/picture/enterzh.jpg}" width="560"
                                                                 height="410" alt="" src=""></a>
        </div>
        <div class="login box">
            <div class="comlogin" id="nloginType_comm">
                <div class="login-style">
                    <span onclick="realWay()" class="login-s-msg fl login-s-active data-feeler" clkseed="ACCOUNT-TAB">账号密码登录</span>
                    <span class="login-s-line"></span>
                    <span onclick="emailWay()" class="login-s-user fr data-feeler wait"
                          clkseed="ACCOUNT-TAB">邮箱验证登录</span>
                </div>
                <div class="cl0"></div>
                <!--普通方式登录-->
                <div class="login-box" id="real-login" style="display: block;">
                    <form id="real-form" class="layui-form">
                        <p class="layui-form-item">
                            <label>
                                <input type="text" name="email" lay-verify="required" lay-reqtext="账号是必填项，岂能为空？"
                                       placeholder="&#xe66f; 输入邮箱" autocomplete="off" class="layui-input layui-icon"/>
                            </label>
                        </p>
                        <p class="layui-form-item">
                            <label>
                                <input type="password" name="password" lay-verify="required" lay-reqtext="密码是必填项，岂能为空？"
                                       minlength="6" maxlength="24" placeholder="&#xe673; 输入密码" autocomplete="off"
                                       class="layui-input layui-icon">
                            </label>
                        </p>
                        <p>
                            <!--错误信息显示-->
                            <span id="gen-msg"></span>
                        </p>
                        <input type="submit" class="btn-submit btn-red submit-user" lay-submit lay-filter="form"
                               value="登录"/>
                    </form>
                </div>
                <!--邮箱验证登录-->
                <div class="login-box" id="email-login" style="display: none;">
                    <form id="email-form" class="layui-form">
                        <p class="layui-form-item">
                            <label>
                                <input id="email" type="email" name="email" lay-verify="required"
                                       lay-reqtext="邮箱是必填项，岂能为空？"
                                       placeholder="&#xe66f; 请输入邮箱" autocomplete="off" class="layui-input layui-icon"/>
                            </label>
                        </p>

                        <p class="layui-form-item">
                            <label>
                                <input type="text" name="code" lay-verify="required" lay-reqtext="邮箱是必填项，岂能为空？"
                                       placeholder="&#xe66f; 请输入邮箱验证码" autocomplete="off"
                                       class="layui-input layui-icon"/>
                                <br>
                                <span onclick="sendEmailCode()" class="btn-red btn-sent sentphonecapt">发送验证码</span>
                            </label>
                        </p>

                        <p>
                            <!--错误信息显示-->
                            <span id="email-msg"></span>
                        </p>
                        <input type="submit" class="btn-submit btn-red submit-user" lay-submit
                               lay-filter="form"
                               value="登录"/>
                    </form>
                </div>

            </div>
            <div class="cl0"></div>
        </div>
    </div>
    <div class="cl0"></div>
    <div class="cl15"></div>
</div>
<script type="text/javascript" th:src="@{/js/prompt.js}"></script>
<script>

    //触发邮件验证码
    function sendEmailCode() {
        //获取邮箱内容
        let email = $("#email").val();
        //判断是否输入了邮箱
        if (email.trim().length <= 0) {
            alert("请输入邮箱后在操作");
            return;
        }

        let flag = confirm("您，确定要使用这个邮箱进行注册吗?");

        if (flag) {
            //发请求
            $.ajax({
                url: "/sendCode?email=" + email,
                method: "get",
                success: function (result) {
                    if (result == false) {
                        alert("验证码已发送，请稍等");
                    } else if (result == true) {
                        alert("发送成功，请注意接收！");
                    } else {
                        //返回的是错误信息，需要把错误信息打印在显眼的位置
                        $("#email-msg").html("<font color=\"red\">" + result.message + "</font>");
                    }
                }
            })
        }
    }

    //邮箱密码登录
    function realWay() {
        //修改显示
        $(".login-style").html('            <span onclick="realWay()" class="login-s-msg fl login-s-active data-feeler" clkseed="ACCOUNT-TAB">账号密码登录</span>\n' +
            '                           <span class="login-s-line"></span>\n' +
            '                           <span onclick="emailWay()" class="login-s-user fr data-feeler wait" clkseed="ACCOUNT-TAB">邮箱验证登录</span>\n');
        //修改对应的登录框
        $("#real-login").attr("style", "display: block");
        $("#email-login").attr("style", "display: none");
    }

    //email方式登录
    function emailWay() {
        //修改显示
        $(".login-style").html('                    <span onclick="realWay()" class="login-s-user fr data-feeler wait"\n' +
            '                          clkseed="ACCOUNT-TAB">账号密码登录</span>\n' +
            '                    <span class="login-s-line"></span>\n' +
            '                    <span onclick="emailWay()" class="login-s-msg fl login-s-active data-feeler" clkseed="ACCOUNT-TAB">邮箱验证登录</span>\n');
        //修改对应的登录框
        $("#real-login").attr("style", "display: none");
        $("#email-login").attr("style", "display: block");
    }

    $(function () {

        //real登录
        $("#real-form").submit(function () {
            //给正常登录的绑定提交事件
            //获取表单数据
            let data = $("#real-form").serialize();

            $.ajax({
                url: "/user/login",
                method: "post",
                data: data,
                dataType: 'json',
                success: function (result) {
                    if (result == true) {
                        window.location.href = '/index';
                    } else {
                        //返回的是错误信息，需要把错误信息打印在显眼的位置
                        $("#gen-msg").html("<font color=\"red\">" + result.message + "</font>");
                    }
                },
            });
            //避免触发表单提交
            return false;
        });

        //email登录
        $("#email-form").submit(function () {
            //给邮箱登录的绑定提交事件
            //获取表单数据
            let data = $("#email-form").serialize();

            $.ajax({
                url: "/user/email/login",
                method: "post",
                data: data,
                dataType: 'json',
                success: function (result) {
                    if (result == true) {
                        window.location.href = '/index';
                    } else {
                        //返回的是错误信息，需要把错误信息打印在显眼的位置
                        $("#email-msg").html("<font color=\"red\">" + result.message + "</font>");
                    }
                }
            })
            //避免触发表单提交
            return false;
        });

    })


</script>
</body>
</html>